<template>
<div class="wrapper">
    <div v-if="web" class="header">
        <text class="header-text">上海卓顾信息科技有限公司</text>
        <div class="back-area" @click="back">
            <image class="back" :src="getUrl('image/back.png')"/>
        </div>
    </div>

    <scroller class="main" :show-scrollbar="false">
        <div class="chart">
            <web style="width: 750px; height: 600px" :src="getUrl('chart/chart_taxEntry.html')"></web>
        </div>
        <div class='income_items' v-for="(item,i) in taxList" :key="i">
            <image class='in_img' :src="getUrl('image/income_'+(i+1)+'.png')"/>
            <text class="text">{{item.title}}</text>
            <text class="money">{{item.value}}</text>
        </div>
    </scroller>
</div>
</template>

<script>
export default {
    data () {
        return {
            web: false,
            url:'http://192.168.0.113:8081/dist/assets',
            taxList: [
                { title: '收入（元）', value: '123' },
                { title: '增值税', value: '115' },
                { title: '消费税', value: '156' },
                { title: '印花税', value: '1563' },
                { title: '城建税', value: '126' },
                { title: '教育费附加', value: '36' },
                { title: '地方教育费附加', value: '981' },
                { title: '个人所得税', value: '296' },
                { title: '文化建设费', value: '529' },
                { title: '所得税', value: '599' }
            ]
        }
    },
    created(){
        let platform = weex.config.env.platform;
        this.web = platform.toLowerCase()!=='web'?false:true;
    },
    methods:{
        getUrl(param){
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl); 
            let platform = weex.config.env.platform;
            var nativeBase;  
            var native;   

            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
            native = nativeBase.replace('components/','') + 'assets/' + param;
            
            return native;  
        },
        back(){
            var navigator = weex.requireModule('navigator')
            navigator.pop()
        },
    }
    
}
</script>

<style scoped>
.wrapper{
    background-color: #f5f5f5;
}
.header{
    height: 90px;
    width: 750px;
    background-color: #ffffff;
}
.header-text{
    height: 90px;
    line-height: 90px;
    text-align: center;
}
.back-area{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 20px;
    align-items: center;
    justify-content: center;
}
.back{
    width: 30px;
    height: 30px;
}



.main{
    flex: 1;
}
.chart{
    height: 600px;
    width: 750px;
    background-color: #f5f5f5;
}
.income_items{
  height: 120px;
  background-color: #ffffff;
  border-bottom-width: 2px ;
  border-bottom-color:#f7f7f7;
  flex-direction: row;
  align-items: center;
}
.in_img{
  width: 80px;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
}
.text{
  flex: 1;
  font-size:32px;
}
.money{
  width: 200px;
  font-size:30px;
  font-weight:bold;
  text-align: right;
  margin-right: 20px;
}
</style>
